<template>
  <div class="catagory">


    <van-search v-model="search_value" placeholder="请输入搜索关键词"  disabled
                shape="round"
                @click="handleClickOpenSearch"
    />

    <div class="content" >
      <!--    分类侧边栏-->
      <van-sidebar    v-model="activeKey" @change="onChange" >
        <van-sidebar-item v-for="(item,index) in categoryList" :key="index"
                          :title="item.name"
        />
      </van-sidebar>


      <!--    内容区域-->
      <ul class="catagory_ul" >
        <li >
<!--          第一行图片-->
          <div class="catagory_ul_img">
            <img :src="currentCategory.banner_url"  alt="" class="catagory_ul_img_src"
                 width="95%" height="140px"
            />
            <h5 class="catagory_ul_h5">
              {{currentCategory.front_name}}
            </h5>
          </div>
<!--          第二行文字标题-->
          <div class="catagory_ul_title" >
            <span class="catagory_ul_title_span" >

            </span>
            <h3 class="catagory_ul_title_h3" >
              {{currentCategory.name}}
            </h3>
          </div>
<!--          第三行表格logo-->
          <van-grid class="category_grid" :column-num="3" >
            <van-grid-item class="category_grid_item"
                           v-for="(item,index) in currentCategory.subCategoryList" :key="index"
                           :icon="item.wap_banner_url" :text="item.name"
                           style="height: 86px"

            />
          </van-grid>

        </li>

      </ul>



    </div>


  </div>
</template>

<script>
import { getCatalog, getCatglogCurrent } from '@/request/api'

export default {
  name: 'Category',
  data () {
    return {
      activeKey: 0,
      search_value:'',
      categoryList:[],  //分类数据
      currentCategory:{}, //当前分类页数据
      categoryId:1005000,  //侧边栏的分类商品id

    }
  },
  created () {
    this.getCatalogData()
    this.getCatelogCurrent()
  },
  computed: {},
  methods: {
    // 打开搜索弹出窗口，阴影窗口打开
    handleClickOpenSearch(){
      this.$router.push('/home/searchPopup')
      // this.$store.commit('changeIsShowPopupShadow',true)
    },
    // 获取分类数据
    getCatalogData(){
      getCatalog().then(res=>{
        this.categoryList=res.data.categoryList
      })
    },
    // 获取当前分类页数据
    getCatelogCurrent(){
      getCatglogCurrent({
        id:this.categoryId
      }).then(res=>{
        this.currentCategory=res.data.currentCategory
      })
    },
    // 侧边栏改变触发
    onChange(val){


      this.categoryId=this.categoryList[val].id

      // loding加载弹窗
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration:500
      });

      // 延迟响应
      setTimeout(()=>{
        // 跳转到用户页面
        this.getCatelogCurrent()

      },500)

    },

  }
}
</script>

<style lang="less" scoped>
.catagory{
  font-size: .18rem;
  font-family: "黑体";
}
.content{
  width: 100%;
  height: 90vh;
  display: flex;
  background-color: #fff;
  .van-sidebar{
    width: 20%;
    background-color: #f7f8fa;
  }
  .catagory_ul{
    width: 80%;
    .catagory_ul_img{
      width: 100%;
      position: relative;
      .catagory_ul_img_src{
        margin: 0 7px;
        border-radius: 5px;
        box-shadow: 0 0 6px #000;
        filter: brightness(0.5);
      }
      .catagory_ul_h5{
        width: 100%;
        color: #fff;
        font-size: 14px;
        position: absolute;
        top: 48%;
        left: 0;
        z-index: 222;
        text-align: center;
      }
    }
  .catagory_ul_title{
    width: 100%;
    height: 50px;
    position: relative;
    background-color: #fff;
    font-size: 16px;
    .catagory_ul_title_span{
      width: 50%;
      height: 2px;
      background-color: #ccc;
      position: absolute;
      margin: auto;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
    .catagory_ul_title_h3{
      width: 30%;
      height: 40px;
      background-color: #fff;
      position: absolute;
      margin: auto;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      line-height: 40px;
      text-align: center;
      color: #000;
    }
    .category_grid{

    }
  }
  }
}


</style>
